<template>
	<view>
		<view class="no-warpper u-skeleton" v-if="hasNet">
			<view class="nl-shadow-box m10">
				<view>
					<view class="nl-flex-title">
						<text>查询条件</text>
					</view>
					<view class="nl-flex-list">
						<text class="u-skeleton-rect">楼栋</text>
						<view class="right-grey u-skeleton-rect">{{queryInformation.floorName}}</view>
					</view>
					<view class="nl-flex-list">
						<text class="u-skeleton-rect">单元</text>
						<view class="right-grey u-skeleton-rect">{{queryInformation.unitNum}}单元</view>
					</view>
					<view class="nl-flex-list">
						<text class="u-skeleton-rect">房屋</text>
						<view class="right-grey u-skeleton-rect">{{queryInformation.roomNum}}</view>
					</view>
				</view>
			</view>

			<view class="nl-shadow-box m10" >
				<view>
					<view class="nl-flex-title">
						<text>房屋信息</text>
					</view>
					<view class="nl-flex-list">
						<text class="u-skeleton-rect">房屋编号</text>
						<view class="right-grey u-skeleton-rect">
							{{roomInformation.floorNum}}-{{roomInformation.unitNum}}-{{roomInformation.roomNum}}
						</view>
					</view>
					<view class="nl-flex-list">
						<text class="u-skeleton-rect">所在楼层</text>
						<view class="right-grey u-skeleton-rect">{{roomInformation.layer}}楼</view>
					</view>
					<view class="nl-flex-list">
						<text class="u-skeleton-rect">房屋房型</text>
						<view class="right-grey u-skeleton-rect">{{roomInformation.apartmentName}}</view>
					</view>
					<view class="nl-flex-list">
						<text class="u-skeleton-rect">建筑面积</text>
						<view class="right-grey u-skeleton-rect">{{roomInformation.builtUpArea}}平方米</view>
					</view>
				</view>
			</view>
			<view class="nl-shadow-box m10" >
				<view>
					<view class="nl-flex-title">
						<text>业主信息</text>
					</view>
					<view class="nl-flex-list">
						<text class="u-skeleton-rect">业主姓名</text>
						<view class="right-grey u-skeleton-rect">{{ roomInformation.ownerName ? roomInformation.ownerName : '——' }}
						</view>
					</view>
					<view class="nl-flex-list">
						<text class="u-skeleton-rect">身份证号</text>
						<view class="right-grey u-skeleton-rect">{{ roomInformation.idCard ? roomInformation.idCard : '——'}}</view>
					</view>
					<view class="nl-flex-list">
						<text class="u-skeleton-rect">业主手机</text>
						<view class="right-grey u-skeleton-rect">{{ roomInformation.link ? roomInformation.link : '——'}}</view>
						<view class="button-mini line m8" @click="callPhone(roomInformation.link)">
							<button>拨打</button>
						</view>
					</view>
				</view>
			</view>

			<view class="nl-shadow-box m10">
				<view>
					<view class="nl-flex-title">
						<text>费用信息</text>
					</view>
					<!-- {{fees.length}} -->
					<!--  -->
					<view v-if='hasFeeLoad'>
						<view v-if='fees.length !==0 '>
							<view class="fee" v-for="(item,index) in fees" :key='item.configId'>
								<view class="feeTop">
									<text class="u-skeleton-rect">{{item.feeName}}</text>
									<text class="u-skeleton-rect timeCol">{{item.deadlineTimeNew | timeFilter}}</text>
								</view>
								<view class="feeBottom">
									<text class="u-skeleton-rect">费用状态:{{item.stateName}}</text>
									<view class="button-mini line m8" @click="goToDetails(item)">
										<button>详情</button>
									</view>
								</view>
							</view>
						</view>

						<view v-else class="nl-flex-list">暂无费用信息</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<netError @refresh="refresh()"></netError>
		</view>
		
		<u-modal v-model="modalShow" @confirm="modalConfirm" content='是否拨打电话？' show-cancel-button="true"></u-modal>
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	import {
		getRoomInfomartion,
		getListFee
	} from '@/api/room.js'

	import {
		mapState
	} from 'vuex';
	import {
		dateSub
	} from '@/utils/dateUtil.js'
	export default {
		data() {
			return {
				queryInformation: {}, //查询条件
				roomId: '', //房间编号 
				roomInformation: {}, //房间详情信息
				fees: [], //费用详情
				hasNet: true ,//是否有网络
				hasFeeLoad:false,//费用是否加载完成
				loading: true, // 是否显示骨架屏组件
				modalShow:false,
				phone:'',
			}
		},
		onLoad(option) {
			console.log('option', JSON.parse(option.param))
			this.queryInformation = JSON.parse(option.param)
			this.getRoomInfomartion()
			
		},
		onShow() {

		},
		computed: {
			...mapState('user', ['userCommunity'])
		},
		methods: {
			/**
			 * 获取房屋信息
			 */
			getRoomInfomartion() {
				let data = {
					communityId: this.userCommunity.communityId,
					roomId: this.queryInformation.roomId,
					page: '1',
					row: '5'
				}
				var that = this
				getRoomInfomartion(data).then(res => {
					that.roomInformation = res.rooms[0]
					console.log('房屋信息', that.roomInformation)
					that.hasNet = true
					that.getListFee()
					// that.loading = false;
				}).catch((reason) => {
					that.roomInformation = {}
					that.hasNet = false
				})
			},
			/**
			 * 获取费用详情
			 */
			getListFee() {
				let data = {
					communityId: this.userCommunity.communityId,
					payerObjId: this.queryInformation.roomId,
					page: '1',
					row: '999'
				}
				var that = this
				getListFee(data).then(res => {
					console.log(res)
					if (res.fees.length !== 0) {
						that.fees = res.fees
						that.fees.forEach(item => {
							item.deadlineTimeNew = dateSub(item.deadlineTime,item.feeFlag)
						})
					}
					that.hasNet = true
					that.hasFeeLoad=true
					that.loading = false;
				}).catch((reason) => {
					that.fees = []
					that.hasNet = false
					that.hasFeeLoad=false
				})
			},
			/*
			 ** 无网刷新 
			 */
			refresh: function() {
				uni.showLoading({
					title: '加载中'
				})
				this.getRoomInfomartion()
				this.getListFee()
			},
			/*
			 ** 跳转到费用详情
			 */
			goToDetails(item) {
				if(!item.preDegrees && !item.curDegrees){
					item.curDegrees = ''
					item.preDegrees = ''
				}
				uni.navigateTo({
					url: "/pages/home/costDetails/costDetails?" +
						"&feeName=" + item.feeName +
						'&feeFlag=' + item.feeFlag +
						'&feeTypeCdName=' + item.feeTypeCdName +
						'&deadlineTime=' + item.deadlineTime +
						'&feeFlagName=' + item.feeFlagName +
						'&stateName=' + item.stateName +
						'&startTime=' + item.startTime +
						'&feePrice=' + item.feePrice +
						'&squarePrice=' + item.squarePrice +
						'&endTime=' + item.endTime +
						'&deadlineTime=' + item.deadlineTime +
						'&preDegrees=' + item.preDegrees  +
						'&curDegrees=' + item.curDegrees
				});
			},
			/**
			 * 拨打电话
			 */
			callPhone(link){
				this.modalShow = true
				this.phone = link
			},
			modalConfirm(){
				uni.makePhoneCall({
				    phoneNumber: this.phone
				});
			}
		},
		filters: {
			timeFilter: (value) => {
				if (!value) return ''
				let time = value.split(' ')[0]
				return time
			}
		}
	}
</script>

<style lang="scss">
	.right-grey {
		color: $nl-text-color-grey;
	}

	.m10 {
		margin-bottom: 32rpx;
	}

	.fee {
		font-size: $uni-font-size-base;
		min-height: 100rpx;
		padding: 0 24rpx;
		margin-bottom: 14rpx;
		border-bottom: 2rpx solid $uni-bg-color-grey;
	}

	.feeTop {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 14rpx 0;
		.timeCol{
			color: $nl-text-color-grey;
		}
		
	}

	.feeBottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: $uni-text-color-grey;
	}
	.u-skeleton-rect{
		min-width: 100rpx;
		min-height: 40rpx
	}
</style>
